<template>
    <view>
        <!-- 银行流水 -->
        <view class="box">
            <view class="num">{{ unit }}{{ num }}</view>
        </view>

        <view class="digit">
            <view class="list" @tap="toDigit" :data-id="item.id" v-for="(item, index) in numList" :key="index">
                <view class="num">
                    <block v-if="item.id == ''">
                        <image src="/static/images/delete.png" mode="aspectFill" />
                    </block>
                    <block v-else>
                        {{ item.id }}
                    </block>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
// pages/mine/mine.js
export default {
    data() {
        return {
            unit: '￥',
            num: '',
            numList: [
                {
                    id: '1'
                },
                {
                    id: '2'
                },
                {
                    id: '3'
                },
                {
                    id: '4'
                },
                {
                    id: '5'
                },
                {
                    id: '6'
                },
                {
                    id: '7'
                },
                {
                    id: '8'
                },
                {
                    id: '9'
                },
                {
                    id: '.'
                },
                {
                    id: '0'
                },
                {
                    id: ''
                }
            ]
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {},
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    /**
     * 组件的方法列表
     */
    methods: {
        toDigit(e) {
            const that = this;
            if (e.currentTarget.dataset.id != '') {
                this.setData({
                    num: `${that.num}${e.currentTarget.dataset.id}`
                });
            } else {
                this.setData({
                    num: that.num.slice(0, -1)
                });
            }
        }
    },
    created: function () {}
};
</script>
<style>
/* pages/mine/mine.wxss */
.box {
    width: 700rpx;
    height: 140rpx;
    margin: 20rpx auto;
    border-radius: 16px;
    background: rgb(243, 243, 251);
    padding: 25rpx;
    box-sizing: border-box;
}

.num {
    width: 100%;
    height: 90rpx;
    font-size: 72rpx;
    font-weight: 600;
    color: rgb(24, 29, 49);
}
.num image {
    width: 41rpx;
    height: 33rpx;
}
.digit {
    display: flex;
    flex-wrap: wrap;
    width: 80%;
    margin: 0 auto;
    margin-top: 40rpx;
}

.digit .list {
    width: 33.333%;
}

.digit .list .num {
    margin: 0 auto;
    margin-bottom: 40rpx;
    width: 128rpx;
    height: 128rpx;
    line-height: 128rpx;
    text-align: center;
    box-sizing: border-box;
    border: 1px solid rgb(77, 77, 77);
    border-radius: 50%;
    font-size: 48rpx;
    color: rgb(91, 101, 137);
}
</style>
